<!-- 第二种列表 -->
<template>
    <div class="twolist">
        <h1 class="tit">{{ listData.tit }}</h1>
        <ul class="list">
            <li class="list_item" v-for="item in listData.data" @click="mpClass(item)">
                <img referrerpolicy="no-referrer" :src="item.img" alt="">
                <div class="item_com">
                    <p class='com_text'>{{ item.Cpmc }}</p>
                    <div class="com_cat">
                        <div class="cat_price">
                            <p class="price">￥{{ item.Price }}</p>
                            <p class="num">已销售{{ item.Sales }}件</p>
                        </div>
                        <div class="cat_img" @click.stop="addData(item)"><i class="iconfont">&#xe70b;</i></div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">查看更多</div> 
    </div>
</template>
<script>
export default {
    name: "twolist",
    props: {
        listData: Object
    },
    methods: {
        addData(data) {
            this.$router.push('/CartList')
            this.$store.commit("Addshop", data)
        },
        mpClass(data) {
            this.$store.commit("DataClass", data)
            this.$router.push(`/Details`)
        }
    }
}
</script>
<style scoped lang="less">
.twolist {
    margin-top: .24rem;
}

.tit {
    text-align: center;
    font-size: 0.38rem;
    line-height: 0.52rem;
    font-weight: bold;
    padding: 0 0.24rem;
}

.list {
    margin: 0 .24rem;
    margin-top: .2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.list_item {
    width: 3.4rem;
    margin-bottom: .22rem;
    background: #fff;

    img {
        width: 3.4rem;
        height: 3.72rem;
    }

    ;

    .item_com {
        padding: .16rem .2rem;
        display: flex;
        flex-wrap: wrap;

        p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.26rem;
            line-height: 0.36rem;
        }
    }
}

.com_cat {
    width: 3rem;
    align-self: flex-end;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cat_price {
        .price {
            font-size: 0.3rem;
            line-height: 0.48rem;
            font-weight: bold;
        }

        ;

        .num {
            font-size: 0.22rem;
            line-height: 0.32rem;
            color: #71797f;
        }
    }

    ;

    .cat_img {
        width: .48rem;
        height: .48rem;
        border-radius: 50%;
        background: #ff7d5f;

        .iconfont {
            font-size: .48rem;
            display: block;
            color: #fff;
        }
    }
}

.btn {
    width: 100%;
    height: .8rem;
    border: none;
    outline: none;
    background: #fff;
    border-radius: .4rem;
    text-align: center;
    line-height: .8rem;
}
</style>